import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class LoginPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return LoginPageState();
  }
}

class LoginPageState extends State<LoginPage> {
  TextEditingController _usernameController = TextEditingController();
  TextEditingController _passwordController = TextEditingController();
  String _username = '', _password = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('登录'),
      ),
      body: Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        color: const Color(0xffC8C8C8),
        child: Flex(
          direction: Axis.vertical,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              width: 60,
              height: 60,
              clipBehavior: Clip.antiAlias,
              decoration: const BoxDecoration(
                  borderRadius: BorderRadius.all(Radius.circular(60 / 2))),
              child: Image.asset("images/user.png"),
            ),
            _generateInputLayout(context, 1),
            _generateInputLayout(context, 2),
            _generateLoginBtn(context),
          ],
        ),
      ),
    );
  }

  Widget _generateInputLayout(context, int type) {
    double top = type == 1 ? 80 : 20;
    return Container(
      width: MediaQuery.of(context).size.width,
      margin: EdgeInsets.fromLTRB(10, top, 10, 0),
      height: 30,
      decoration: const BoxDecoration(
          border: BorderDirectional(
              bottom: BorderSide(color: Colors.grey, width: 1))),
      child: TextField(
        keyboardType: type == 1 ? TextInputType.number : TextInputType.text,
        controller: type == 1 ? _usernameController : _passwordController,
        obscureText: false,
        // focusNode: FocusNode(),
        decoration: InputDecoration(
          hintText: type == 1 ? '请输入用户名' : '请输入密码',
          icon: Icon(
            type == 1 ? Icons.phone_android : Icons.lock,
            size: 20.0,
          ),
          border: InputBorder.none,
          suffixIcon: GestureDetector(
            child: Offstage(
              child: Icon(Icons.clear),
              offstage: type == 1 ? _username == '' : _password == '',
            ),
            onTap: () {
              setState(() {
                if (type == 1) {
                  _username = '';
                  _usernameController.clear();
                } else {
                  _password = "";
                  _passwordController.clear();
                }
              });
            },
          ),
        ),
        onChanged: (value) {
          setState(() {
            type == 1 ? _username = value : _password = value;
          });
        },
      ),
    );
  }

  Widget _generateLoginBtn(context) {
    return Container(
      height: 50,
      width: double.infinity,
      margin: const EdgeInsets.all(10),
      decoration: BoxDecoration(
          color: Theme.of(context).primaryColor,
          borderRadius: BorderRadius.circular(4.0)),
      child: TextButton(
        style: ButtonStyle(
            foregroundColor: MaterialStateProperty.all<Color>(Colors.white54),
            backgroundColor: MaterialStateProperty.all<Color>(
                Theme.of(context).primaryColor)),
        child: const Text("登录"),
        onPressed: () {
          print(
              'Login:username=${_username.trim()};password=${_password.trim()}');
        },
      ),
    );
  }
}
